<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('查看工作流',~{::style})">
    <style>
        .file-footer-caption {
            margin-bottom: 5px!important;
        }
        .file-drop-zone-title {
            padding: 25px 10px!important;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <div class="row">
        <div class="col-md-12 col-sm-12" style="padding:2px;width: 99%;">
            <div class="row">
                <div class="box col-sm-12" style="margin-top:5px;" >
                    <form class="form-horizontal" onsubmit="return false;">
                        <div class="form-group">
                            <label class="control-label col-sm-1"><img style="width: 70px;" th:src="@{/static/img/head/default.jpg}" th:alt="${workflowInfo.creator}" class="img-circle"></label>
                            <div class="col-sm-6">
                                <p style="margin-top: 20px"><span th:text="${workflowInfo.creator}"></span> <span style="margin-left: 50px;" th:text="${#dates.format(workflowInfo.createTime,'yyyy-MM-dd HH:mm:ss')}"></span></p>
                                <p th:switch="${workflowInfo.state}">
                                    <span class="label-default label" th:case="0">已终止</span>
                                    <span class="label-danger label" th:case="1">待审批</span>
                                    <span class="label-success label" th:case="2">已完成</span>
                                    <span class="label-warning label" th:case="3">已撤回</span>
                                </p>
                            </div>
                        </div>
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;margin-bottom: auto;"><span style="font-weight:bold;">问题反馈</span></legend>
                            <div class="form-group">
                                <label class="control-label col-sm-1" style="margin-right: 10px;">课程老师:</label>
                                <div class="col-sm-2" style="padding-left: 0;">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.teacherLogin}"></p>
                                </div>
                                <label class="control-label col-sm-1" style="margin-right: 10px;">课程时间:</label>
                                <div class="col-sm-2" style="padding-left: 0;">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${#dates.format(workflowInfo.classTime,'yyyy/MM/dd H:mm:ss')}"></p>
                                </div>
                                <label class="control-label col-sm-1" style="margin-right: 10px;">上课学员:</label>
                                <div class="col-sm-2" style="padding-left: 0;">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.studentLogin}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1" style="margin-right: 10px;">课程状态:</label>
                                <div class="col-sm-2" style="padding-left: 0;">
                                    <span th:switch="${workflowInfo.classState}">
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="1" th:text="待上课"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="2" th:text="已完成"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="3" th:text="已旷课"></p>
                                        <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:case="4" th:text="已取消"></p>
                                    </span>
                                </div>
                                <label class="control-label col-sm-1" style="margin-right: 10px;">上课教材:</label>
                                <div class="col-sm-6" style="padding-left: 0;">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.material}"></p>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">问题分类:</label>
                                <div class="col-sm-6">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.qtypeName}"></p>
                                </div>
                                <label class="control-label col-sm-2">是否返还课时:</label>
                                <div class="col-sm-2 radio-inline" th:switch="${workflowInfo.returnClass}">
                                    <span th:case="1">是</span>
                                    <span th:case="0">否</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">问题描述:</label>
                                <div class="col-sm-10">
                                    <p style="border: 1px solid #e5e5e5;border-radius: 5px;padding: 10px 10px" th:text="${workflowInfo.content}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1">附件:</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <label>Preview File Icon</label>
                                        <input id="filePreview" name="uploadFiles" type="file" multiple>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px" th:if="${listApproval!=null && listApproval.size()>0}">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;"><span style="font-weight:bold;">审批记录</span></legend>
                            <div class="form-group" th:each="item:${listApproval}">
                                <label class="control-label col-sm-1"><img style="width: 70px;" th:src="@{/static/img/head/default.jpg}" th:alt="${item.approvalName}" class="img-circle"></label>
                                <div class="col-sm-10">

                                    <p style="margin-top: 20px;">
                                        <div style="float: left;width: 50%;font-weight: bold;font-size: 16px;">
                                            <span th:text="${item.pendingName}"></span>
                                            <span th:if="${item.resultState==null}" th:switch="${item.approvalState}">
                                                <span th:case="0">（待审批）</span>
                                                <span th:case="1">（已完成）</span>
                                                <span th:case="2">（审批中）</span>
                                            </span>
                                            <span th:if="${item.resultState!=null}" th:switch="${item.resultState}">
                                                <span th:case="0">（拒绝）</span>
                                                <span th:case="1">（同意）</span>
                                            </span>
                                        </div>
                                        <div style="float: left;width: 50%;font-weight: bold;font-size: 16px;">
                                            <span th:text="${#dates.format(item.createTime,'yyyy-MM-dd H:mm:ss')}"> </span>
                                        </div>
                                    </p>
                                    <p th:if="${item.resultsId>0}" th:switch="${item.resultsId}">
                                        <span th:case="1" style="font-weight: bold;color: red;">问题属实Positively Verified</span>
                                        <span th:case="2" style="font-weight: bold;color: green;">问题不属实Negatively Verified</span>
                                        <span th:case="3" style="font-weight: bold;color: yellow;">无法判定Impossible to verify</span>
                                    </p>
                                    <p th:if="${workflowInfo.returnClass==1 && item.approveReturn==1}">
                                        <span th:if="${item.isReturn==1}" th:text="已返还课时"></span>
                                        <span th:if="${item.isReturn==0}" th:text="不同意返还课时"></span>
                                        <span style="margin-left: 10px;" th:if="${item.notClass==0}" th:text="不计算老师课时"></span>
                                    </p>
                                    <p id="content" th:utext="${item.content}"></p>
                                    <p th:if="${item.filePath!=null && item.filePath!=''}">
                                        <a th:each="filePath,itemStat:${#strings.listSplit(item.filePath,',')}" th:href="@{'//hnres.etalk365.com'+${filePath}}" th:text="${'附件'+(itemStat.index+1)}" style="margin-right: 20px;" target="_blank"></a>
                                    </p>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
<!--                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;"><span style="font-weight:bold;">审批记录</span></legend>-->
                            <div class="form-group" style="text-align: center;" th:if="${workflowInfo.creator==session.loginname}">
                                <button class="btn btn-primary" type="button" th:if="${((workflowInfo.state!=2 && workflowInfo.finishApprovalNum==0) or workflowInfo.processSettingId==6)}" th:onclick="|editApproval(${workflowInfo.id})|" style="margin-top:5px;margin-right: 10px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改 </button>
                                <button class="btn btn-danger" th:if="${workflowInfo.state==1 && workflowInfo.finishApprovalNum==0}" th:onclick="|confirmRevoke(${workflowInfo.id})|" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 撤回 </button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <input id="filePath" type="hidden" th:value="${workflowInfo.filePaths}">
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js}" type="text/javascript"></script>
    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js}" type="text/javascript"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js}"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js}"></script>
    <script>
        $(function () {
            $("#content").html($("#content").text().replace(/\n/g,'<br>'));
            let previewConfig=initialPreviewConfig();

            $("#filePreview").fileinput({
                language: 'zh',
                // theme: 'fas',
                uploadUrl:'',
                browseOnZoneClick: true,
                showUpload: false,
                showCaption: false,
                showBrowse: false,
                showRemove: false,
                dropZoneEnabled: false,
                showClose: false,
                showPreview: true,
                browseClass: "btn btn-primary btn-md",
                fileType: "any",
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                initialPreviewAsData: true,
                initialPreviewShowDelete: false,
                initialPreview: $.trim($("#filePath").val())===""?"":JSON.parse($("#filePath").val()),
                initialPreviewConfig: previewConfig,
            });
        });

        function initialPreviewConfig() {
            let previewConfig1=[];
            let filePath=$.trim($("#filePath").val())===""?"":JSON.parse($("#filePath").val());
            if (filePath!==""){
                let config={};
                for (let i=0;i<filePath.length;i++){
                    // console.log(filePath[i].lastIndexOf("."))
                    let suffix=filePath[i].substring(filePath[i].lastIndexOf(".")+1).toLowerCase();
                    // console.log("suffix: "+suffix);
                    config.key = i+1;
                    if (suffix === "mp4"){
                        config.type = "video";
                        config.filetype = "video/mp4";
                    }else if (suffix === "jpg" || suffix === "jpeg" || suffix === "png" || suffix === "gif"){
                        config.type = "image";
                    }else if (suffix === "pdf"){
                        config.type = "pdf";
                    }else if (suffix === "txt" || suffix === "log"){
                        config.type = "text";
                    }else if (suffix === "swf"){
                        config.type = "flash";
                    }else if (suffix === "mp3" || suffix === "wma" || suffix === "wav"){
                        config.type = "audio";
                    }else {
                        config.type = "object";
                    }
                    previewConfig1.push(config);
                }
                // console.log("previewConfig:"+JSON.stringify(previewConfig));
            }
            return previewConfig1;
        }

        //打开修改界面
        function editApproval(workflowId) {
            let url="/workflow/init/edit/"+workflowId;
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.title("修改工作流", index);
            parent.layer.iframeSrc(index, url);
        }

        function confirmRevoke(workflowId) {
            layer.confirm('你确定要撤回工作流吗？', {
                btn: ['是','否']
            }, function(){
                revokeWorkflow(workflowId);
            }, function(){

            });
        }
        function revokeWorkflow(workflowId) {
            loadIndex = layer.load();
            let url="/workflow/revoke/"+workflowId;
            $.post(url,{},function (result) {
                if (result.status>0){
                    layer.msg("撤回工作流成功",{icon:1},function () {
                        location.reload(true);
                    });
                }else {
                    layer.msg("撤回工作流失败",{icon:2},function () {
                        location.reload(true);
                    });
                }
            },'json');
        }

        //关闭当前layer弹出层
        function layerClose() {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }
    </script>
</div>
</body>
</html>